import React, { useRef, useEffect, useState } from 'react';
import BScroll from "better-scroll";


function Tab(props) {
	let { data, render } = props;
	let bannerWarp = useRef(null);
	let bScroll = null;
	let [now, setNow] = useState(0)
	useEffect(() => {
		let timer = 0;
		bScroll = new BScroll(bannerWarp.current, {
			scrollX: true,
			scrollY: false,
			eventPassthrough: "vertical",
			momentum: false,
			snap: {
				loop: true
			}
		});
		bScroll.on("scrollEnd", () => {
			console.log('bScroll', bScroll)
			setNow(bScroll.getCurrentPage().pageX);
		});
		// timer = setInterval(() => {
		// 	bScroll.next(200);
		// }, 2000);
		// bannerWarp.current.addEventListener("touchstart", () => {
		// 	clearInterval(timer);
		// });
		// bannerWarp.current.addEventListener("touchend", () => {
		// 	timer = setInterval(() => {
		// 		bScroll.next(200)
		// 	}, 2000);
		// })
		return () => {
			clearInterval(timer);
		}
	}, [])
	return <div className="banner">
		<div className="banner_img" ref={bannerWarp}>
			<ul className="banner_list clearfix">
				{
					data.map((item, index) => <li key={index}>{render(item)}</li>)
				}
			</ul>
		</div>
		{
			data.length < 1 ? "" : (<ul className="banner_nav">
				{
					data.map((item, index) => <li key={index} className={index === now ? "active" : ""}></li>)
				}
			</ul>)
		}
	</div>
}
export default Tab;